<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>签署页面</title>
  <style>
    h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
      margin: 0;
      padding: 0;
      text-align: center;
    }
    nav{width:100%;height:80px;background:url("common/images/nav2.png")no-repeat center #4fbbf4;background-size:80%;}
    body{height: 100%;overflow-x: hidden;background:#fff; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
    .btn{background: #ddd;}
    .btn-name{border: solid 1px #ccc; width: 45%; background-color: #fff; padding: 10px 0; border-radius: 5px; font-size: 16px;margin: 10px auto;}
    .btn-name:focus{outline: none;}
    .btn-use, .btn-use:hover, .btn-use:focus{border: 1px solid #fac77d; color: #fac77d;}
    .modal-content{padding: 0 30px;}
    .margin-div{margin:0 auto;text-align: center}
    .draggable{width: 110px;height: 50px;float: left;z-index: 99;bottom: 25px;position: relative;}
    .draggable img{width: 100%;height: 100%;border: 1px dashed #4fbbf4;}
    .demo-description{position: relative;}
    .demo-description img{width: 100%;position: relative;top:-50px;left: 0;}
    .drag-title{position: absolute;bottom: -20px;margin: 0;width: 100%;text-align: center;color: #4fbbf4;}
    .modal-title{color: #4fbbf4;}
    .group-btn{width: 100%;}
    .bottom-bg6{width: 33%;margin: 0 20px;display: inline-block;text-align: center;}
    #smsCode{background: none;border: none;border-bottom: 1px solid #ccc;border-radius: 0;-webkit-box-shadow:none;box-shadow: none;}
  </style>
  <!--<link rel="shortcut icon" href="/ico/favicon.ico">-->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/ico/apple-touch-icon-114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/ico/apple-touch-icon-72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="/ico/apple-touch-icon-57-precomposed.png">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.css" rel="stylesheet">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/lightness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
  <script src="common/bootstrap.min.js"></script>
  <link href="common/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav></nav>
<h1>体验云合同</h1>
 <div id="draggable" class="draggable">
   <img id="sign" src=""/>
   <p id="drag-title" class="drag-title">拖拽进行签署</p>
 </div>

 <div class="demo-description">
   <img src="common/images/ht.png"/>
 </div>
 <div class="margin-div">
   <button class="btn-name btn-use" id="btnSign">签署</button>
 </div>
 <div class="margin-div">
   <button class="btn-name btn-use" id="send" style="display: none;">发送</button>
 </div>
  <div class="modal fade" id="SmsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>-->
          <h4 class="modal-title" align="center">手机验证</h4>
        </div>
        <input type="hidden" id="phone" name="phone" value=""/>
        <h5 style="margin-left: 15px;">已发送验证码至<span id="showPhone"></span>，请输入验证码完成签署。</h5>
        <div class="modal-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <div class="bottom-bg6">
                <input type="text" class="form-control" id="smsCode" placeholder="请输入手机收到的验证码" value="123456">
              </div>
              <button type="button" class="btn bottom-bg2 bottom-bg6" id="reSendSmsBtn">获取验证码</button>
            </div>
            <div class="form-group">
              <div class="group-btn">
                <button type="reset" class="btn bottom-bg6" id="reset" style="background: #fff;border: 1px solid #525252;color: #525252;">取消</button>
                <button type="button" class="btn bottom-bg6" id="signSubmitBtn" style="background: #fff;border: 1px solid #4fbbf4;color: #4fbbf4;">确定</button>
              </div>
            </div>
          </form>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
<script type="text/javascript">
  var destLeft = 0;
  var destTop = 0;
  $(function () {
    $('#sign').attr('src', 'data:image/png;base64,' + sessionStorage.getItem('sign'));

    $("#draggable").draggable({
      start: function (event, ui) {
        console.log('start moving~~~');
      },
      stop: function (event, ui) {
        destTop = parseFloat(ui.offset.top);
        destLeft = parseFloat(ui.offset.left);
        console.log('stop moving~~~:' + destLeft + ';' + destTop);
      }
    });
  });

  $("#btnSign").click(function () {
    $('#SmsModal').modal();
  });

  $("#reset").click(function () {
    $('#SmsModal').modal('hide');
  });

  var d = new Date();
  var year = d.getFullYear();
  var month = d.getMonth() + 1; // 记得当前月是要+1的
  var dt = d.getDate();
  var today = year + "年" + month + "月" + dt +"日";
  $("#signSubmitBtn").click(function () {
    $('#SmsModal').modal('hide');
    $("#draggable").unbind();
    $("#drag-title").text(today);
    $("#sign").css('border','none');
    $('#btnSign').css("display","none");
    $('#send').css("display","block");
  });

  $("#send").click(function () {
    window.location.href = './send.html';
  });
</script>
</body>
</html>